<template>
  <div v-if="dataList.length>0" class="fire-fighting-system">
    <div class="content-item-tittle">消防系统实时运行情况</div>
    <el-row :gutter="14" style="margin-top: 20px;">
      <template v-for="(item, index) in dataList">
        <el-col class="points-card-item" :key="index" :span="8">
          <el-col :span="6" class="sys-icon-wrap">
            <el-image class="sys-icon" :src="item.systemUrl" >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-col>
          <el-col :span="18">
            <p class="sys-name">
              <span>{{item.systemName}}</span>
            </p>
            <span
                class="points-num"
              >{{'监测 ' + item.facsTotal + '个 物联设备,'}}{{item.fireNum===0&&item.faultNum===0&&item.shieldNum===0?'全部正常':'' }}{{item.fireNum===0?'':'报警数'+item.fireNum+'、'}}{{ item.faultNum===0?'':'故障数' +item.faultNum+'、'}}{{item.shieldNum===0?'':'屏蔽数'+item.shieldNum+'、'}}</span>
          </el-col>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
import { getSysAndFcfStatus } from "@/api/status";
export default {
  name: "FireFightingSystem",
  props: {
    organizationId: {
      default() {
        return undefined
      }
    }
  },
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getSysAndFcf();
  },
  methods: {
    // 更新/刷新模块
    refreshModel() {
      this.getSysAndFcf()
    },
    getSysAndFcf() {
      let that = this;
      getSysAndFcfStatus({
        orgId: this.organizationId || this.$store.state.userinfo.org.id || ""
      }).then(res => {
        if (res.status === 200) {
          that.dataList = res.data;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.fire-fighting-system {
  .points-card-item {
    width: calc(100% / 3 - 14px);
    height: 150px;
    margin: 0px 7px 20px 7px;
    border: 1px solid #e1e1e1;
    display: flex;
    align-items: center;
    .sys-icon-wrap {
      display: flex;
      justify-content: center;
      .sys-icon {
        width: 64px;
        height: 64px;
      }
    }
    .sys-name {
      font-size: 20px;
      font-weight: 400;
      color: #2f3444;
      margin-bottom: 19px;
    }
    .points-num {
      font-size: 14px;
      font-weight: 400;
      color: #8890ab;
    }
  }
}
</style>